<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import RegistrationOrgin from "@/pages/news/registrationCenter/registrationOrgin.vue";
import RegistrationForm from "@/pages/news/registrationCenter/registrationForm.vue";
import ProjectInfo from "@/pages/projectInfo/index.vue";
import TeamInformation from "@/pages/teamInformation/index.vue";
import File from "@/pages/file/index.vue";
const props = withDefaults(
    defineProps<{
      registUid: string
      type: string 
      key: string
      link?: string
    }>(),
    {
      link: 'intranet'
    }
)

const loading = ref(false);

const tabsValue = ref("1");

const helpform = ref<{
  show: () => void;
}>();

const orginform = ref<{
  show: () => void;
}>();

const projectInfoo = ref<{
  show: () => void;
}>();

const teamForm = ref<{
  show: () => void;
}>();

const file = ref<{
  show: () => void;
}>();

const handleChange = (e) => {
  if (e == 2) {
    orginform.value?.show();
  } else if (e == 4) {
    helpform.value?.show();
  } else if (e == 1) {
    projectInfoo.value?.show();
  } else if (e == 3) {
    teamForm.value?.show();
  } else if (e == 5) {
    file.value?.show();
  }
};

const show = () => {
  console.log("切换")
  handleChange("1")
  tabsValue.value = "1"
};

defineExpose({
  show,
});
</script>

<template>
  <div class="contrr">
    <div
      v-if="loading"
      class="loading-overlay"
    >
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
    <a-tabs
      v-else
      v-model:activeKey="tabsValue"
      @change="handleChange"
    >
      <a-tab-pane key="1">
        <template #title>
          <icon-calendar />参赛项目基本信息
        </template>
        <div class="contaner">
          <ProjectInfo
              :link="link"
            ref="projectInfoo"
            :registUid="props.registUid"
            :show="1"
            :type="props.type"
          />
        </div>
      </a-tab-pane>

      <a-tab-pane key="2">
        <template #title>
          <icon-calendar />参赛单位基本信息
        </template>
        <div class="contaner">
          <registration-orgin
              :link="link"
            ref="orginform"
            :registUid="props.registUid"
            :show="1"
          />
        </div>
      </a-tab-pane>

      <a-tab-pane key="3">
        <template #title>
          <icon-calendar />团队信息
        </template>
        <div class="contaner">
          <team-information
              :link="link"
            ref="teamForm"
            :registUid="props.registUid"
            :show="1"
          />
        </div>
      </a-tab-pane>

      <a-tab-pane key="4">
        <template #title>
          <icon-calendar />项目申报书
        </template>
        <div class="contaner">
          <registration-form
              :link="link"
            ref="helpform"
            :registUid="props.registUid"
            :show="1"
          />
        </div>

      </a-tab-pane>

      <a-tab-pane key="5">
        <template #title>
          <icon-calendar />附件
        </template>
        <div class="contaner">
          <file
              :link="link"
            ref="file"
            :registUid="props.registUid"
            :show="1"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped lang="scss">
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 13px;
  color: #333;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
